<template>
  <div class="users">
    <h2>用户管理页面</h2>
    <el-space>
      <el-input v-model="input" style="width: 240px" placeholder="用户名搜索" />
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-space>

    <el-table :data="tableData" style="width: 100%; margin-top: 20px">
      <!-- 如果单元格的内容不是文字，那么就需要用具名插槽的语法 -->
      <!-- scope.row表示这一行的整个对象的数据 -->
      <el-table-column prop="avatar" label="头像">
        <template #default="scope">
          <!-- <span>{{ scope.row.avatar }}</span> -->
          <el-image
            style="width: 80px; height: 80px"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
            :preview-teleported="true"
          />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="remove(scope.row.username)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
// import request from "@/request/request";
import { getUsersApi } from "@/request/api";

const input = ref<string>("");
const tableData = ref([]);
// const getData = (params = {}) => {
//   getUsersApi(params).then((res) => {
//     tableData.value = res.data;
//   });
// };

const getData = async (params = {}) => {
  const res = await getUsersApi(params);
  tableData.value = res.data;
};

onMounted(() => {
  getData();
});

// 搜索
const search = () => {
  // console.log(input.value);
  getData({ username: input.value });
};
const reset = () => {
  input.value = "";
  getData();
};

const remove = (name: string) => {
  console.log(name);
};
</script>

<style lang="less" scoped>
h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
</style>
